<template>
  <div>
    <!-- 搜索 -->
    <a-row>
      <a-col :span="24">
        <a-form layout="inline" :model="formData">
          <a-form-item label="规则名称">
            <a-input v-model="formData.ruleName"></a-input>
          </a-form-item>
          <a-form-item label="使用状态">
            <a-select v-model:value="formData.ruleStatus">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="on">启用</a-select-option>
              <a-select-option value="off">停用</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary">搜索</a-button>
          </a-form-item>
          <a-form-item>
            <a-button>重置</a-button>
          </a-form-item>
        </a-form>
      </a-col>
    </a-row>
    <!-- 操作 -->
    <a-row class="btnBox">
      <a-col :span="3">
        <a-button type="primary" @click="openModal({}, 4)">+添加</a-button>
      </a-col>
      <a-col :span="3">
        <a-button>导入</a-button>
      </a-col>
      <a-col :span="3">
        <a-button>导出</a-button>
      </a-col>
      <a-col :span="3">
        <a-button>模板下载</a-button>
      </a-col>
      <a-col :span="3">
        <a-button>批量删除</a-button>
      </a-col>
    </a-row>
    <!-- 表格 -->
    <a-row>
      <a-col :span="24">
        <a-table :dataSource="tableData" :columns="tableColumns" bordered :row-selection="rowSelection" rowKey="ruleId">
          <template v-slot:bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex === '操作'">
              <a-button v-if="record.ruleStatus === '停用'" type="text" size="small">启用</a-button>
              <a-button v-if="record.ruleStatus === '启用'" type="text" size="small">停用</a-button>
              <a-button type="text" size="small" @click="openModal(record, 1)">查看</a-button>
              <a-button type="text" size="small" @click="openModal(record, 2)">编辑</a-button>
              <a-button v-if="record.ruleStatus === '停用'" type="text" size="small"
                @click="openModal(record, 3)">删除</a-button>
            </template>
          </template>
        </a-table>
      </a-col>
    </a-row>
    <!-- 弹窗 -->
    <a-modal v-model:open="isShowModal" :title="modalTitle" @ok="submit">
      <div v-if="modalTitle === '删除'">
        确认要删除选中的数据？记录取消后将无法恢复！
      </div>
      <div v-else>
        <a-form :disabled="isChecked" :model="tabelFormData" :labelAlign="right" :label-col="{ span: 8 }">
          <a-form-item label="规则类型">
            <a-select v-model="tabelFormData.ruleType">
              <a-select-option v-for="item in ruleType" :key="item.value" :value="item.value">{{ item.label
                }}</a-select-option>
            </a-select>
          </a-form-item>
          <h3>基本信息</h3>
          <a-form-item label="规则名称">
            <a-input v-model:value="tabelFormData.ruleName"></a-input>
          </a-form-item>
          <h3>编码规则</h3>
          <a-form-item label="首字母">
            <a-input v-model="tabelFormData.firstWord"></a-input>
          </a-form-item>
          <h4>24位流水码</h4>
          <a-form-item label="流水码首字母">
            <a-input v-model="tabelFormData.IDFirstWord"></a-input>
          </a-form-item>
          <a-form-item label="随机码长度">
            <a-input v-model="tabelFormData.IDLength"></a-input>
          </a-form-item>
          <a-form-item label="规则描述">
            <a-textarea v-model="tabelFormData.ruleMessage"></a-textarea>
          </a-form-item>
        </a-form>
        <a-alert message="说明：编码为该分类下随机生成的25位码。首字母+长度位随机数。" type="info" />
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
const formData = ref({
  ruleStatus: ''
})

// 是否展示弹窗
const isShowModal = ref(false)
// 弹窗标题
const modalTitle = ref('查看')

// 操作类型
const isChecked = ref(true)

// 表格列
const tableColumns = ref([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    customRender: ({ text, record, index }) => `${index + 1}`,
    align: 'center',
  },
  {
    title: '规则编号',
    dataIndex: 'ruleId',
    key: 'ruleId',
    align: 'center',
  },
  {
    title: "规则类型",
    dataIndex: 'ruleType',
    key: 'ruleType',
    align: 'center',
  },
  {
    title: '规则名称',
    dataIndex: 'ruleName',
    key: 'ruleName',
    align: 'center',
  },
  {
    title: '使用状态',
    dataIndex: 'ruleStatus',
    key: 'ruleStatus',
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'createrName',
    key: 'createrName',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: '操作',
    align: 'center',
  }

])
// 表格数据
const tableData = ref([
  {
    ruleId: '测试数据1',
    ruleType: '实力编码',
    ruleName: '网络设备分类',
    ruleStatus: '启用',
    createrName: '里斯',
    createTime: '2023-09-06 18:06:06'
  },
  {
    ruleId: '测试数据2',
    ruleType: '实力编码',
    ruleName: '网络设备分类',
    ruleStatus: '停用',
    createrName: '里斯',
    createTime: '2023-09-06 18:06:06'
  }
])

const ruleType = ref([
  {
    label: '实力编码',
    value: '实力编码'
  }
])

// 表格弹窗表单
const tabelFormData = ref({})
// 操作对照表
const activeArr = [
  {
    active: '查看',
    value: 1
  },
  {
    active: '编辑',
    value: 2
  },
  {
    active: '删除',
    value: 3
  },
  {
    active: '添加',
    value: 4
  }
]
// 表格操作
const openModal = (data, type) => {
  // 赋值
  const { ruleType, ruleName } = data
  tabelFormData.value = { ruleType, ruleName }
  const activeValue = activeArr.filter(item => item.value === type)[0]

  // 是否允许编辑
  if (activeValue.value === 1) {
    isChecked.value = true
  } else {
    isChecked.value = false
  }
  // 开启弹窗
  isShowModal.value = true
  // 修改弹窗标题
  modalTitle.value = activeValue.active
}

// 表格选择
const rowSelection = {
  onChange: ((selectedRowKeys, selectedRows) => {
    console.log(selectedRowKeys, selectedRows, '-----------')
  })
}

// 提交表单
const submit = () => {
  isShowModal.value = false
  console.log(tabelFormData.value)
}
</script>
<style scoped lang="less">
.btnBox {
  margin: 20px 0;
}
</style>
